<!-- 排班设置页 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <el-card
      class="box-card"
      shadow="never"
    >
      <el-button
        type="primary"
        class="add-btn"
        @click="dialogVisible = true"
      >添加工作模式</el-button>
      <el-table
        class="waybill-table"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="工作模式编号"
          width="220px"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="工作模式"
        >
        </el-table-column>
        <el-table-column
          prop="workPatternTypeDesc"
          label="类型"
        >
        </el-table-column>
        <el-table-column
          prop="workDate"
          label="工作日期"
          width="240px"
        >
        </el-table-column>
        <el-table-column
          prop="workStartMinute1"
          label="工作时间"
          :formatter="workTimeFormatter"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              class="edit"
              type="text"
              size="small"
              @click="editWorkSetting(scope.row.id)"
            >编辑</el-button>
            <span class="Partingline">|</span>
            <el-button
              class="delete"
              type="text"
              size="small"
              @click="delWorkSetting(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="params.page"
        :page-sizes="[5,10, 15, 20, 25]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      v-if="dialogVisible"
      :title="this.id ? '编辑工作模式':'新增工作模式'"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <WorkSetting
        :id="id"
        :dialog-visible="dialogVisible"
        :get-work-aetting-list="getWorkAettingList"
        @changeDialogVisible="changeDialogVisible"
        @changeId="changeId"
      ></WorkSetting>
    </el-dialog>
  </div>
</template>

<script>
import { workHistoryList, deleteWorkHistory } from '@/api/transit'
import WorkSetting from './components/arrange-setting.vue'

export default {
  components: {
    WorkSetting
  },
  data() {
    return {
      id: null, // 工作模式编号
      dialogVisible: false,
      tableData: [],
      total: 0,
      params: {
        page: 1,
        pageSize: 5
      }

    }
  },
  created() {
    this.getWorkAettingList()
  },
  methods: {
    handleClose(done) {
      this.id = null
      done()
    },
    changeId(val) {
      this.id = val
    },
    editWorkSetting(id) {
      this.id = id
      this.dialogVisible = true
    },
    changeDialogVisible(val) {
      this.dialogVisible = val
    },
    delWorkSetting(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '确定要删除吗', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteWorkHistory(id)
        this.getWorkAettingList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {})
    },
    workTimeFormatter(row) {
      let time = row.workEndMinute1 - row.workStartMinute1
      time = time / 60
      return time.toFixed(2) + '小时'
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.params.page = 1
      this.getWorkAettingList()
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.getWorkAettingList()
    },
    async getWorkAettingList() {
      const res = await workHistoryList(this.params)
      this.tableData = res.data.items
      this.total = Number(res.data.counts)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-form-item__label{
  font-weight: 400;
}
.el-col-11{
  width: 100%;
}
 .el-pagination{
  padding: 20px 0;
  position: relative;
  left: 25%;
}
.Partingline{
  color: #e3e3e3;
}
.edit{
  color: #419EFF;
}
 ::v-deep .el-card__body{
  padding: 0;
}
.box-card{
  margin: 20px;
  padding: 30px;
  .add-btn{
    margin-bottom: 30px;
  }
}
::v-deep .table-card-box {
  ::v-deep .el-card__body {
    padding: 0;
  }
}
::v-deep .pagination{
  padding-bottom: 30px;
}
.tab-box {
  color: #20232a;
  ::v-deep .el-tabs__item.is-active {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
  }
  ::v-deep .el-form-item__content {
    height: 40px;
  }
  ::v-deep .el-tabs__item {
    font-size: 14px;
  }
  ::v-deep .el-tabs__item:hover {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #e15536;
  }
  ::v-deep .tips {
    margin-left: 130px;
    margin-bottom: 14px;
    color: #bac0cd;
  }
  .el-checkbox {
    margin-right: 12px;
  }
  ::v-deep .workDay {
    .el-form-item__error {
      position: relative;
    }
  }
}
::v-deep .el-dialog__body {
  padding-top: 30px !important;
  .el-tabs__header {
    padding-bottom: 25px;
  }
}
::v-deep .el-tabs__nav,
.is-top {
  transform: translateX(30px) !important;
}
</style>
